<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - 卡片式任务记录系统</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
</head>
<body>
  <div id="app">
    <div class="login-container">
      <div class="login-panel">
        <div class="login-header">
          <h2>卡片式任务记录系统</h2>
          <p>高效管理您的任务与记录</p>
        </div>
        
        <div class="login-form">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="登录" name="login">
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="top">
                <el-form-item label="账号" prop="account">
                  <el-input 
                    v-model="loginForm.account" 
                    prefix-icon="el-icon-user"
                    placeholder="请输入账号"
                  ></el-input>
                </el-form-item>
                
                <el-form-item label="密码" prop="password">
                  <el-input 
                    v-model="loginForm.password" 
                    prefix-icon="el-icon-lock"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                  ></el-input>
                </el-form-item>
                
                <div class="login-options">
                  <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                  <el-button type="text" @click="forgotPassword">忘记密码?</el-button>
                </div>
                
                <el-form-item>
                  <el-button type="primary" class="submit-btn" @click="submitLogin">登录</el-button>
                </el-form-item>
              </el-form>
              
              <div class="other-login">
                <p>其他登录方式</p>
                <div class="login-icons">
                  <i class="el-icon-chat-dot-square"></i>
                  <i class="el-icon-mobile-phone"></i>
                  <i class="el-icon-s-custom"></i>
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="注册" name="register">
              <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-position="top">
                <el-form-item label="账号" prop="account">
                  <el-input 
                    v-model="registerForm.account" 
                    prefix-icon="el-icon-user"
                    placeholder="请输入账号"
                  ></el-input>
                </el-form-item>
                
                <el-form-item label="用户名称" prop="name">
                  <el-input 
                    v-model="registerForm.name" 
                    prefix-icon="el-icon-s-custom"
                    placeholder="请输入用户名称"
                  ></el-input>
                </el-form-item>
                
                <el-form-item label="邮箱" prop="email">
                  <el-input 
                    v-model="registerForm.email" 
                    prefix-icon="el-icon-message"
                    placeholder="请输入邮箱"
                  ></el-input>
                </el-form-item>
                
                <el-form-item label="密码" prop="password">
                  <el-input 
                    v-model="registerForm.password" 
                    prefix-icon="el-icon-lock"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                  ></el-input>
                </el-form-item>
                
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input 
                    v-model="registerForm.confirmPassword" 
                    prefix-icon="el-icon-lock"
                    type="password"
                    placeholder="请再次输入密码"
                    show-password
                  ></el-input>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" class="submit-btn" @click="submitRegister">注册</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        
        <div class="login-footer">
          <p>&copy; 2023 卡片式任务记录系统 版权所有</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入登录页JS -->
  <script src="./js/login.js"></script>
</body>
</html> 